<!doctype html>
<html lang="en">
  <head>
    {% include head.html %}
    <meta name="google-site-verification" content="rAqJUZCjZlUbyl6J8w-zmhxfpEHTQq4hrnhPnWueBgI" />
  </head>
  <body>
    <header id="homepage-header">
        {% include homepage-header.html %}
    </header>
    <nav id="mobile-nav" class="mobile-nav-home">
      {% include mobile-nav.html %}
    </nav>
    <nav id="main-nav" class="homepage-nav float-left">
      {% include nav.html %}
    </nav>
    <main>
      <section id="homepage-content">
        {{ content }}
      </section>
    </main>
    {% include footer.html %}
  </body>
    <!-- Sticky navigation hides an offset for anchor link targets. This script resolves this issue -->
    <script>
      jQuery(document).ready(function($) {
  
        // set a variable for the anchor link which is the location.hash
        var anchorLink = $(window.location.hash);
          // test to see if the link is a anchor link, if not the length will have no value, this is done to avoid js errors on non anchor links
          if ( anchorLink.length ) {
            // set an element as the fixed entity, header in this case and get its height
            var offsetSize = $("header").innerHeight();
            // fire the animation from the top of the page to the anchor link offsetting by the fixed elements height, the number is the speed of the animation
            $("html, body").animate({scrollTop: anchorLink.offset().top - offsetSize }, 500);
          }
      
      });
      </script>
</html>